<template>
  <div>
    <div class="select-area">
      <div class="select-area-first-row">
        <div class="select-area-title">抽查区域</div>
        <!--<el-button size="mini" type="primary" @click="openDialog">编辑</el-button>-->
      </div>
      <div v-if="hasData" class="area-address-wrap">
        <div v-for="(item, index) in checkAreas" :key="index" class="area-address">
          <div class="area-type-title">{{ dict.label.cq_random_area_type[item.randomType] }}:</div>
          <div class="form-area-list">
            <el-tag class="custom-form-tag" v-for="(tag, index2) in item.results" :key="'area' + index2" type="info">
              {{ tag.areaName }}
            </el-tag>
          </div>
        </div>

        <!-- <div v-if="viewArea.buildinds.length > 0" class="area-address">
          <div class="area-type-title">楼栋:</div>
          <div class="form-area-list">
            <el-tag
              class="custom-form-tag"
              v-for="(tag, index) in viewArea.buildinds"
              :key="'area' + index"
              type="info"
            >
              {{ tag.areaName }}
            </el-tag>
          </div>
        </div>
        <div v-if="viewArea.floors.length > 0" class="area-address">
          <div class="area-type-title">楼层:</div>
          <div class="form-area-list">
            <el-tag
              class="custom-form-tag"
              v-for="(tag, index) in viewArea.floors"
              :key="'area' + index"
              type="info"
            >
              {{ tag.areaName }}
            </el-tag>
          </div>
        </div>
        <div v-if="viewArea.rooms.length > 0" class="area-address">
          <div class="area-type-title">房间:</div>
          <div class="form-area-list">
            <el-tag
              class="custom-form-tag"
              v-for="(tag, index) in viewArea.rooms"
              :key="'area' + index"
              type="info"
            >
              {{ tag.areaName }}
            </el-tag>
          </div>
        </div>
        <div v-if="viewArea.publicAreas.length > 0" class="area-address">
          <div class="area-type-title">公区:</div>
          <div class="form-area-list">
            <el-tag
              class="custom-form-tag"
              v-for="(tag, index) in viewArea.publicAreas"
              :key="'area' + index"
              type="info"
            >
              {{ tag.areaName }}
            </el-tag>
          </div>
        </div> -->
      </div>
      <div v-else class="no-data">全区域</div>
    </div>
    <!--区域编辑-->
    <!--<el-dialog title="检查区域" :visible.sync="open" :close-on-click-modal="false" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item
          label="项目类型"
          prop="deptId"
        >
          <el-radio-group v-model="form.deptId">
            <el-radio
              v-for="dict in itemTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="抽取项目" prop="projectId">
          <el-radio-group v-model="form.projectId">
            <el-radio
              v-for="dict in selectItemOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{ dict.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="抽取项">
          <el-select v-model="form.building" class="item-input" filterable clearable placeholder="请选择栋">
            <el-option
              v-for="item in buildingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="form.floor" class="item-input" filterable clearable placeholder="请选择层">
            <el-option
              v-for="item in floorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="form.room" class="item-input" filterable clearable placeholder="请选择户">
            <el-option
              v-for="item in roomOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div class="add-area">
          <el-button type="primary" @click="addItem">新增</el-button>
          <div class="area-list">
            <el-tag
              class="custom-tag"
              v-for="(tag, index) in form.areaList"
              :key="'area' + index"
              closable
              @close="closeTag(index)"
              type="info"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
export default {
  name: 'CheckArea',
  dicts: ['cq_random_area_type'],
  data() {
    return {
      viewAreaList: [],
      hasData: false,
      checkAreas: [], // 抽查区域
      viewArea: {
        buildinds: [],
        floors: [],
        rooms: [],
        publicAreas: []
      }
      /* // 是否显示弹表单
      open: false,
     // 表单参数
      form: {
        deptId: undefined,
        projectId: undefined,
        orgType: undefined,
        date: undefined,
        building: '',
        floor: '',
        room: '',
        areaList: []
      },
      areaList: [],
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
        ],
        projectId: [
          { required: true, message: '请选择抽取项目', trigger: 'change' }
        ],
        orgType: [
          { required: true, message: '请选择检查单位', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请选择检查时间', trigger: 'change' }
        ]
      },
      // 项目类型 选项
      itemTypeOptions: [
        { dictValue: 1, dictLabel: '高层' },
        { dictValue: 2, dictLabel: '别墅' }
      ],
      // 抽取项目选项
      selectItemOptions: [
        { dictValue: 3, dictLabel: '主体' },
        { dictValue: 1, dictLabel: '砌筑' },
        { dictValue: 2, dictLabel: '抹灰' }
      ],
      buildingOptions: [
        { value: 1, label: '楼栋1' },
        { value: 2, label: '楼栋2' },
        { value: 3, label: '楼栋3' }
      ],
      floorOptions: [
        { value: 1, label: '层1' },
        { value: 2, label: '层2' },
        { value: 3, label: '层3' }
      ],
      roomOptions: [
        { value: 1, label: '户1' },
        { value: 2, label: '户2' },
        { value: 3, label: '户3' }
      ]*/
    }
  },
  methods: {
    init(list = []) {
      this.viewAreaList = list
      this.hasData = !!list.length

      // 以 randomType 进行归类
      const obj = {}
      list.map(item => {
        if (item.isDel) return
        const { randomType } = item
        !obj[randomType] && (obj[randomType] = [])
        obj[randomType].push(item)
      })
      this.checkAreas = Object.keys(obj).map(k => ({ randomType: k, results: obj[k] }))

      /* const viewArea = {
        buildinds: [],
        floors: [],
        rooms: [],
        publicAreas: []
      }
      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId) {
          viewArea.rooms.push(list[i])
        } else if (!list[i].roomId && list[i].floor) {
          viewArea.floors.push(list[i])
        } else if (!list[i].roomId && !list[i].floor && list[i].buildingId) {
          viewArea.buildinds.push(list[i])
        } else {
          viewArea.publicAreas.push(list[i])
        }
      }
      this.viewArea = viewArea */
    }
    /* openDialog() {
      this.form.areaList = [...this.areaList]
      this.open = true
    },
    submitForm() {
      this.areaList = [...this.form.areaList]
      this.$emit('getReaList', this.form.areaList)
      this.open = false
    },
    cancelForm() {
      this.open = false
    },
    addItem() {
      let type = ''
      for (let i = 0; i < this.itemTypeOptions.length; i++) {
        if (this.itemTypeOptions[i].dictValue === this.form.deptId) {
          type = this.itemTypeOptions[i].dictLabel
        }
      }
      let item = ''
      for (let i = 0; i < this.selectItemOptions.length; i++) {
        if (this.selectItemOptions[i].dictValue === this.form.projectId) {
          item = this.selectItemOptions[i].dictLabel
        }
      }
      const str = `${type} - ${this.form.building}栋${this.form.floor}层${this.form.room}户 # ${item}`
      this.form.areaList.push(str)
    },
    closeTag(index) {
      this.form.areaList.splice(index, 1)
    }*/
  }
}
</script>

<style scoped lang='scss'>
  .select-area {
    border: 1px #DCDFE6 solid;
    padding: 20px;
    margin: 10px 0 30px 0;
    border-radius: 5px;
    .select-area-first-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .select-area-title {
        font-weight: bold;
        font-size: 18px;
      }
    }
    .no-data {
      font-size: 14px;
    }
    .area-address-wrap {
      max-height: 200px;
      overflow-y: auto;
      .area-address {
        display: flex;
        font-size: 14px;
        padding: 2px 10px;
        .area-type-title {
          width: 70px;
          flex-shrink: 0;
          font-weight: bold;
        }
        .form-area-list {
          .custom-form-tag {
            margin: 0 10px 10px 0;
          }
        }
      }
    }
  }
  .add-area {
    padding: 10px 20px 0;
    .area-list {
      margin-top: 10px;
      border: 1px #d4d4d4 solid;
      border-radius: 5px;
      padding: 20px 0 10px 20px;
      max-height: 300px;
      min-height: 100px;
      overflow-y: auto;
      .custom-tag {
        margin: 0 10px 10px 0;
      }
    }
  }
  .item-input {
    width: 140px;
    margin-right: 20px;
  }
  .dialog-footer {
    margin-right: 20px;
  }
</style>
